<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h1>{{message}}</h1>
  <c></c>
  <cc></cc>
</div>

<script src="../js/vue.js"></script>
<script>

//   const che = Vue.extend({
//     template:`
//     <div>
//     <p>购物车</p>
//     <h6>您加入的书籍！</h6>
// </div>
//     `
//   })

//全局语法糖
  Vue.component('c',{
    template:`
    <div>
    <p>购物车</p>
    <h6>您加入的书籍！</h6>
</div>
    `
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '中国牛蛙！'
    },
    //局部语法糖
    components: {
      cc: {
        template:`
    <div>
    <p>商城</p>
    <h6>您可以选择书籍！</h6>
</div>
    `
      }
    }
  })
</script>
</body>
</html>